<template>
    <div class="control-box">
        <h3>城市列表</h3>
        <h5>已开城市：</h5>
        <el-checkbox-group v-model="checkListed" @change="changedFn">
            <el-checkbox label="北京" />
            <el-checkbox label="天津" />
            <el-checkbox label="青岛" />
            <el-checkbox label="太原" />
        </el-checkbox-group>
    </div>
    <div id="allmap"></div>

</template>

<script lang="ts" setup>
import { onMounted, reactive } from "@vue/runtime-core";
import { ref } from 'vue';

var map = null;

//已选择的城市： 
const checkListed = ref([]);

// 定义每个城市的坐标点：
const pointObj = {
    "北京": {
        longitude: 116.20,
        latitude: 39.915,
    },
    "天津": {
        longitude: 117.04,
        latitude: 38.3,
    },
    "青岛": {
        longitude: 120.20,
        latitude: 36.915,
    },
    "太原": {
        longitude: 114.20,
        latitude: 38.00,
    }
}


function changedFn(val: any) {
    console.log("val", val);
    console.log("checkListed", checkListed);//["北京"]
    // 删除所有的标记点 
    map.clearOverlays();

    //循环在地图上添加选择城市的标注点
    checkListed.value.forEach(item => {
        var point = new BMapGL.Point(pointObj[item].longitude, pointObj[item].latitude);//创建了一个经纬度的点
        // var marker = new BMapGL.Marker(point, { icon: myIconFn() });        // 创建标注   
        var marker = new BMapGL.Marker(point);
        map.addOverlay(marker);                // 将标注添加到地图中
    });
}

// 自定义图标

// function myIconFn() {
//     var myIcon = new BMapGL.Icon("/imgs/zuobiao.png", new BMapGL.Size(100,100), {
//         // 指定定位位置。  
//         // 当标注显示在地图上时，其所指向的地理位置距离图标左上   
//         // 角各偏移10像素和25像素。您可以看到在本例中该位置即是  
//         // 图标中央下端的尖角位置。   
//         anchor: new BMapGL.Size(10, 25),
//         // 设置图片偏移。  
//         // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您  
//         // 需要指定大图的偏移位置，此做法与css sprites技术类似。   
//         imageOffset: new BMapGL.Size(0, 0 - 25)   // 设置图片偏移   
//     });
//     return myIcon;
// }

onMounted(() => {
    map = new BMapGL.Map("allmap");    // 创建Map实例
    map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    // map.setHeading(64.5);   //设置地图旋转角度
    // map.setTilt(73);       //设置地图的倾斜角度
    // map.setMapType(BMAP_EARTH_MAP);//地球模式
    var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
    map.addControl(scaleCtrl);
    var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
    map.addControl(zoomCtrl);

    var opts = {
        anchor: BMAP_ANCHOR_BOTTOM_LEFT,
        offset: new BMapGL.Size(30, 60)
    }

    var cityCtrl = new BMapGL.CityListControl(opts);  // 添加城市列表控件
    map.addControl(cityCtrl);
    map.setMapStyleV2({
        styleId: '8b8a61cdf53fce9a1d0d9dacac9ce979'
    });




})

</script>

<style scoped>
#allmap {
    width: 90%;
    height: 100%;
    overflow: hidden;
    margin: 0;
    font-family: "微软雅黑";
}

.control-box {
    width: 100%;
    height: 160px;
    background-color: #ededed;
}
</style>